<template>
  <div id="big_box" v-if="is_show">
    <van-nav-bar
      fixed
      placeholder
      title="技能列表"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-checkbox-group v-model="checked">
      <van-cell-group inset>
        <van-cell
          class="border_bottom"
          :title="item.name"
          v-for="(item, idx) in all_jns"
          :key="idx"
          clickable
          @click="toggle(idx)"
        >
          <template #label>
            <span v-html="item.attrs_content"> </span>
          </template>
          <template #right-icon>
            <van-checkbox
              shape="square"
              :name="item.pk"
              :ref="(el) => (checkboxRefs[idx] = el)"
              @click.stop
            />
          </template>
        </van-cell>
        <van-button @click="onsubmit" round type="primary" size="large"
          >提交</van-button
        >
      </van-cell-group>
    </van-checkbox-group>
  </div>
</template>

<script>
import {
  Cell,
  Checkbox,
  CheckboxGroup,
  CellGroup,
  Button,
  Toast,
  NavBar,
} from 'vant'
import { ref, onBeforeUpdate } from 'vue'
import axios from 'axios'
export default {
  components: {
    [Cell.name]: Cell,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [NavBar.name]: NavBar,
  },
  setup() {
    // 所有技能
    const all_jns = []
    // 返回上级
    const onClickLeft = () => history.back()
    // 已经学习了的技能
    const checked = ref([])
    const checkboxRefs = ref([])
    onBeforeUpdate(() => {
      checkboxRefs.value = []
    })
    return {
      checked,
      all_jns,
      checkboxRefs,
      onClickLeft,
    }
  },
  data() {
    return {
      is_show: false,
    }
  },
  methods: {
    toggle: function (idx) {
      this.checkboxRefs[idx].toggle()
      console.log(this.checked)
    },
    get_rw_by_type: function () {
      const zy_type = this.$route.query.zy_type
      console.log(zy_type)
      axios.get('/apis/bind_jn/?type=' + zy_type).then((response) => {
        this.checked = response.data.data
      })
      axios.get('/apis/jinengs/?search=' + zy_type).then((response) => {
        this.all_jns = response.data
        this.is_show = true
      })
    },
    onsubmit: function () {
      var data = {
        type: this.$route.query.zy_type,
        jns: this.checked,
      }

      axios({
        method: 'post',
        url: '/apis/bind_jn/',
        data: data,
      }).then((res) => {
        if (res.data.code == 200) {
          Toast('添加成功')
        }
      })
    },
  },
  mounted: function () {
    this.get_rw_by_type()
  },
}
</script>

<style lang="scss" scoped>
.border_bottom {
  border-bottom: 1px solid rgb(235, 235, 235);
}
</style>
